<template>
	<view class="container" style="position: relative;">
		<u-image width="100%" height="100vh" :src="asyncImgs.pond.bg"></u-image>
		<!-- :style="{background: `url(${asyncImgs.pond.bg}) no-repeat`, backgroundSize: '100% 100%'}" -->
		<view style="position: absolute; top: 0; width: 100%;">
			<view class="bg-wrap" >
				<view class="location" :style="{top: windowHeight == 672 ? '31%' : '34%'}">
					<view class="prize-wrap" :style="{ transform: `rotate(${begin}deg)` }" v-if="formInfo.list">
						<!-- 由于旋转的角度原因 类名不同，只能分成两个数组遍历; |  前三个奖品 -->
						<view class="left">
							<view v-for="(item,index) in formInfo.list.slice(0,3)" :class="['item', 'l-' + index, index % 2 === 0 ? 'even' : 'odd']">
								<span>{{item.name}}</span>
								<view class="img">
									<u-image width="80rpx" height="80rpx" :src="item.image_url"></u-image>
								</view>
							</view>
						</view>
						<!-- 后三个奖品 -->
						<view class="right">
							<view v-for="(item,index) in formInfo.list.slice(3)" :class="['item', 'r-' + (index + 3), index % 2 === 0 ? 'odd' : 'even']">
								<span>{{item.name}}</span>
								<view class="img">
									<u-image width="80rpx" height="80rpx" :src="item.image_url"></u-image>
								</view>
							</view>
						</view>
						<view class="btn"
						:style="{transform: `translate(-50%, -50%) rotate(${-begin}deg)`, background: `url(${asyncImgs.pond.pointer}) 0 0 / cover no-repeat`}">
						</view>
					</view>
				</view>
				<view class="win-info" :style="{top: windowHeight == 672 ? '78.5%' : '76%'}">
					<u-notice-bar :is-circular="false" color="rgb(201, 59, 4)" :volume-icon="false" :list="noticeList" bg-color="transparent"></u-notice-bar>
				</view>
				<view class="count-down" :style="{bottom: windowHeight == 672? '12%' : '14%'}">
					活动还有
					<u-count-down :timestamp="miao" :show-border="true" separator="zh" separator-color="#f0250e" font-size="28" color="#fff" bg-color="#f0250e" border-color="rgb(240, 37, 14)"></u-count-down>
					后结束
				</view>
				<view class="btn-wrap" :style="{bottom: windowHeight == 672? '-3%' : '-1%'}">
					<u-image width="170rpx" height="80rpx" @click="handleMyPrizeClick" :src="asyncImgs.pond.wode"></u-image>
					<view class="center" style="position: relative;">
						<u-image width="274rpx" height="124rpx" @click="handleLotteryClick" :src="asyncImgs.pond.button" style="margin: 0 10rpx;">
						</u-image>
						<view class="txt">
							剩余次数 {{oppty}}次
						</view>
					</view>
					<u-image width="170rpx" height="80rpx" :src="asyncImgs.pond.yaoqing">
					</u-image>
					<!-- 分享好友需要 点击button open-type="share" 才能调用；使用opacity把按钮隐藏在图片上 -->
						<button style="
						opacity: 0;
						position: absolute;
						right: 10rpx;"
						open-type="share">邀请好友</button>
				</view>
			</view>
		</view>
		<view class="rules-wrap">
			<view class="rules-info">
				<view class="notch">
				<i/>	活动规则 <i/>
				</view>
				<view class="desc">抽奖活动的规则通常包括以下几个方面：	</view>
				<view class="item">{{formInfo.setting.rule}}</view>
			</view>
		</view>

		<u-toast ref="uToast" />
			<u-mask :show="prizeDialog" @click="prizeDialog = false">
				<view class="warp">
					<view class="rect" @tap.stop style="position: relative;">
						<view class="content">
							<h2>恭喜您!</h2>
							<view class="desc">
								获得{{prizeInfo.name}}
							</view>
							<view class="image">
								<u-image :src="prizeInfo.image_url"
								width="180rpx" height="180rpx"></u-image>
							</view>
						</view>
						<view class="btn">
							<u-button type="error" shape="circle" size="medium" @click="getPrizeClick" v-if="prizeInfo.gift">领取奖励</u-button>
						</view>

						<view class="close-wrap" style="position: absolute; bottom: -90rpx; left: 43%;">
							<u-icon name="close-circle" color="#fff" size="48" @click="prizeDialog = false"></u-icon>
						</view>
					</view>
				</view>
			</u-mask>
	</view>
</template>

<script>
	import { pondIndex,pondLottery } from '@/api/pond.js'
	export default {
		data() {
			return {
				begin: 0, // 转盘旋转的值
        miao:0,
				clickLock: false,
				formInfo: {},
				noticeList: [],
				windowHeight: 0, // 视口高度
				prizeIndex: 0, // 中奖奖品索引
				oppty: null, // 次数
				prizeDialog: false,
				prizeInfo: {} // 抽中的奖品信息
			}
		},
		onLoad() {
			this.pondIndexData()
			// 由于背景图在不同机型下，会进行裁剪，造成背景图有些变化，定位就有些偏差；
			// 所以想到的办法是获取下视口高度，根据高度给不同的 定位值
			uni.getSystemInfo({
				success:(res) => {
					this.windowHeight = res.windowHeight
				}
			})
		},
		methods: {
			// 转盘顺时针旋转
			run() {
				this.clickLock = true
				let timer = null
				let base = 360 * 5 // 转的圈数
				let prizeDeg = [30,90,150,330,270,210] // 奖品在转盘中指针对应的角度
				let nextAngle = prizeDeg[this.prizeIndex]
				const finalAngle = base + nextAngle
				timer = setInterval(() => {
					this.begin += 60
					// 转够五圈后加上 中奖奖品的度数，清除定时器
					if (this.begin == base) {
						this.begin += nextAngle
						clearInterval(timer)
						this.clickLock = false
						this.prizeInfo = this.formInfo.list[this.prizeIndex]
						return this.prizeDialog = true
						console.log('奖品')
					}
				},16)
			},
			getPrizeClick() {
				uni.navigateTo({
					url:'/prizeWheel/myPrize/myPrize'
				})
			},
			// 跳转 我的奖品 页
			handleMyPrizeClick() {
				uni.navigateTo({
					url:'/prizeWheel/myPrize/myPrize'
				})
			},
			async handleLotteryClick() {
				if (this.clickLock) { // 防止旋转时重复点击
					return
				}
				this.begin = 0
				if (Number(this.formInfo.oppty) === 0) {
					return this.$refs.uToast.show({
					title: '剩余次数为 0 ',
					type: 'error'
				})
				} else {
					const prizeList = [...this.formInfo.list]
					const res = await pondLottery()
					this.prizeIndex = prizeList.findIndex(item => item.id == res.data.id)
					this.oppty = res.data.oppty
					console.log(this.prizeIndex,prizeList[this.prizeIndex])
				}
				this.run()
			},
			// 点击邀请好友时的分享回调
			onShareAppMessage(res) {
			  if (res.from === 'button') {// 来自页面内分享按钮
			    console.log(res.target)
			  }
			  return {
			    title: '幸运大转盘',
			    path: '/prizeWheel/index/index'
			  }
			},
			// 转盘数据
			async pondIndexData() {
				const res = await pondIndex()
				this.formInfo = res.data
        this.miao = this.getTimestamp();
				this.oppty = res.data.oppty
				this.noticeList = res.data.win_log.map(item => {
					return `恭喜${item.nickname}获得${item.name}`
				})
			},
      getTimestamp() {
        let timestamp = 0,
            data = this.formInfo.setting;
        if (data && data.end_time) {
          let active = new Date().getTime(),
              endTime = data.end_time * 1000;

          if (endTime >= active) {
            timestamp = parseInt((endTime - active) / 1000);
          }
        }
        return timestamp;
      },
		}
	}
</script>

<style lang="less" scoped>
	.container{

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}

		.rect {
			width: 420rpx;
			border-radius: 20rpx;
			padding: 40rpx;
			height: 506rpx;
			background-color: #fff;
			.content {
				padding: 0 40rpx;
				text-align: center;
				h2 {
					font-weight: bold;
				}
				.desc {
					margin: 20rpx 0 30rpx 0;
					color: #999;
				}
				.image {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 220rpx;
					border-radius: 20rpx;
					border: 1px solid #ffdb6d;
					margin-bottom: 30rpx;
				}
			}
			.btn {
				width: 100%;
				display: flex;
				justify-content: center;
			}
		}

		.bg-wrap {
			height: 100vh;
			position: relative;
			.location {
				position: absolute;
				left: 130rpx;
			}
			.prize-wrap {
				position: relative;
				width: 500rpx;
				height: 500rpx;
				margin: 0 auto;
				border-radius: 50%;
				overflow: hidden;
				color: #b93b01;
				.odd {
					background-color: rgb(254, 231, 201);
				}
				.even {
					background-color: rgb(255, 241, 214);
				}
				.left {
					width: 250rpx;
					height: 500rpx;
					overflow: hidden;
					position: absolute;
					left: 0;
					.item {
						width: 250rpx;
						height: 250rpx;
						position: absolute;
						span {
							position: absolute;
							left: 100rpx;
							top: 60rpx;
							transform: rotate(-30deg);
						}
						.img {
							position: absolute;
							left: 150rpx;
							top: 100rpx;
							transform: rotate(-30deg);
						}
					}
					.l-0 {
						transform-origin: right bottom;
						transform: rotate(calc(60deg* 0));
					}
					.l-1 {
						transform-origin: right bottom;
						transform: rotate(calc(60deg* -1));
					}
					.l-2 {
						transform-origin: right bottom;
						transform: rotate(calc(60deg* -2));
					}
				}
				.btn {
					width: 80px;
					height: 80px;
					background-color: #fff;
					border-radius: 50%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					user-select: none;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.right {
					width: 250rpx;
					height: 500rpx;
					overflow: hidden;
					position: absolute;
					right: 0;
					.item {
						position: absolute;
						width: 250rpx;
						height: 250rpx;
						span {
							position: absolute;
							right: 100rpx;
							top: 60rpx;
							transform: rotate(30deg);
						}
						.img {
							position: absolute;
							right: 150rpx;
							top: 100rpx;
							transform: rotate(30deg);
						}
					}
					.r-3 {
						transform-origin: left bottom ;
						transform: rotate(calc(60deg * 0));
					}
					.r-4 {
						transform-origin: left bottom ;
						transform: rotate(calc(60deg * 1));
					}
					.r-5 {
						transform-origin: left bottom ;
						transform: rotate(calc(60deg * 2));
					}
				}
			}
			.win-info {
				position: absolute;
				left: 168rpx;
				width: 390rpx;
			}
			.count-down {
				position: absolute;
				left: 14%;
				color: rgb(240, 37, 14);
			}
			.btn-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				left: 8%;
				.txt {
					position: absolute;
					bottom: 30%;
					left: 62rpx;
					font-size: 22rpx;
					color: #fff;
				}
			}
		}
		.rules-wrap {
			background-color: #ffc69b;
			padding: 50rpx 30rpx;
			.rules-info {
				background-color: #fff6d9;
				padding:0 22rpx 22rpx;
				border-radius: 20rpx;
				color: #b93b01;
				.notch {
					width: 300rpx;
					height: 60rpx;
					margin: 0 auto;
					background: linear-gradient(to bottom, #fde4b5,#fdd989);
					clip-path: polygon(0 0, 100% 0, calc(100% - 10rpx) 100%, 10rpx 100%);
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					text-align: center;
					line-height: 60rpx;
					color: #b93b01;
					font-weight: 600;
					i {
						display: inline-block;
						width: 10rpx;
						height: 10rpx;
						background-color: #eab485;
						border-radius: 50%;
						vertical-align: middle;
						margin: 0 10rpx;
					}
					}

					.desc {
						padding: 25rpx 0;
						.item {

						}
				}
			}
		}
	}
</style>
